﻿<div>
    <Button OnClick="addRow" Type="primary" Style="margin-bottom:16px">
        Add a row
    </Button>
    <Table DataSource="listOfData" RowClassName="@(_=>"editable-row")" Bordered>
        <Column Width="30%" DataIndex="@nameof(context.Name)" TData="string">
            @if (editId == context.Id)
            {
                <Input Type="text" @bind-Value="context.Name" OnBlur="stopEdit" AutoFocus />
            }
            else
            {
                <div class="editable-cell-value-wrap" style="padding-right:24px" @onclick="()=>startEdit(context.Id)">
                    @context.Name
                </div>
            }
        </Column>
        <Column DataIndex="@nameof(context.Age)" TData="string"></Column>
        <Column DataIndex="@nameof(context.Address)" TData="string"></Column>
        <ActionColumn Title="Action">
            <Popconfirm Title="Sure to delete?"
                        OnConfirm="()=> deleteRow(context.Id)"
                        OkText="Yes"
                        CancelText="No">
                <a>Delete</a>
            </Popconfirm>
        </ActionColumn>
    </Table>
</div>

<style>
    .editable-cell {
        position: relative;
    }

    .editable-cell-value-wrap {
        padding: 5px 12px;
        cursor: pointer;
    }

    .editable-row:hover .editable-cell-value-wrap {
        padding: 4px 11px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
    }

    [data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
        border: 1px solid #434343;
    }
</style>

@using System.Text.Json;
@code{
    int i = 0;
    string editId;
    record ItemData(string Id, string Age, string Address)
    {
        public string Name { get; set; }
    };

    ItemData[] listOfData = { };

    void addRow()
    {
        listOfData = listOfData.Append(new($"{i}", "32", $"London, Park Lane no. {i}") { Name = $"Edward King {i}" });
        i++;
    }

    void deleteRow(string id)
    {
        listOfData = listOfData.Where(d => d.Id != id).ToArray();
    }

    void startEdit(string id)
    {
        editId = id;
    }

    void stopEdit()
    {
        var editedData = listOfData.FirstOrDefault(x => x.Id == editId);
        Console.WriteLine(JsonSerializer.Serialize(editedData));
        editId = null;
    }

    protected override void OnInitialized()
    {
        addRow();
        addRow();
    }
}